import { useResize } from '@shared/lib/hooks/useResize'
import { IconButton } from '@shared/ui/IconButton'
import { IconFont } from '@shared/ui/IconFont'
import { Switcher } from '@shared/ui/Switcher'
import { useState } from 'react'

export const ThemeSwitcher = () => {
  const [theme, setTheme] = useState('light')
  const toggleTheme = (checked: boolean) => {
    setTheme(checked ? 'dark' : 'light')
    console.log(checked)
  }
  const { isScreenMd } = useResize()
  return (
    <>
      {isScreenMd ? (
        <Switcher
          className={''}
          isChecked={theme === 'dark'}
          onChange={toggleTheme}
          renderOff={<IconFont iconName='icon-sun' />}
          renderOn={<IconFont iconName='icon-moon' />}
        />
      ) : (
        <IconButton
          iconName={theme === 'dark' ? 'icon-moon' : 'icon-sun'}
          onClick={() => toggleTheme(theme === 'light')}
          size='large'
        />
      )}
    </>
  )
}
